<template>
<el-form :model="changePs" :rules="rules" ref="changeps" label-width="100px" class="w-50">
  <el-form-item label="原始密码" prop="oldPs">
    <el-input v-model="changePs.oldPs" type="password"></el-input>
  </el-form-item>
  <el-form-item label="新密码" prop="newPs" >
    <el-input v-model="changePs.newPs" type="password"></el-input>
  </el-form-item>
  <el-form-item label="重复新密码" prop="renewPs">
    <el-input v-model="changePs.renewPs" type="password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">保存修改</el-button>
  </el-form-item>
</el-form>
</template>

<script>
import axios from 'axios'
export default {
  name: "change-ps",
  title: "修改密码",
  data() {
    let validatePs = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入新密码'));
      } else if (value !== this.changePs.newPs) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      changePs: {
        oldPs: '',
        newPs: '',
        renewPs: ''
      },
      rules: {
        oldPs: [{
          required: true,
          message: '请输入原始密码',
          trigger: 'blur'
        }],
        newPs: [{
          required: true,
          message: '请输入新密码',
          trigger: 'blur'
        }, {

        }],
        renewPs: [{ validator: validatePs, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submitForm() {
      this.$refs.changeps.validate((valid) => {
        if (valid) {
          // 提交修改
          axios.post('modifyPs', this.$paramsConvert({password: this.changePs.oldPs, newpassword: this.changePs.newPs})).then(res => {
            if (res.data.status) {
              this.$message({
                showClose: true,
                message: res.data.msg,
                type: 'success'
              })
              this.changePs = {
                oldPs: '',
                newPs: '',
                renewPs: ''
              },
              this.$refs.changeps.resetFields();
            } else {
              this.$message({
                showClose: true,
                message: res.data.data,
                type: 'error'
              })
            }
          }).catch(error => {
            this.$catchError(error)
          })
        }
      })
    }
  }
}
</script>

<style lang="less">
</style>
